<template>
  <section>
    <div class="map-bar-container" ref="mapbarContainer">
      <div class="map-bar-inner" id="tips" style="transform: scale(1)">
        <div
          class="map-bar-small"
          :class="'map-bar-'"
          id="direction"
          alt
          ref="bigImage"
          style="transform: scale(1)"
        >
          <!-- <span
            :style="item.style"
            class="map-hot-point"
            v-for="(item,index) in items"
            :key="index"
            @touchend.stop="selectDirectionPoint(item.index)"
            @click.stop="selectDirectionPoint(item.index)"
          >
            <span class="map-yuandian"></span>
          </span> -->
          <span class="map-eye-ico" ref="map_eye_ico"></span>
        </div>
      </div>
      <div class="mapBts">
        <button class="map-button" @click="cutMap"> <img src="../../assets/map/cut.png"  width="20" height="20"></button>
        <button class="map-button"  @click="addMap"> <img src="../../assets/map/add.png"  width="20" height="20"></button>
        <button class="map-button" @click="ctrOp"> <img src="../../assets/map/op.png"  width="20" height="20"></button>
        <button class="map-button" @click="backMap"> <img src="../../assets/map/back.png"  width="20" height="20"></button>
      </div>
    </div>
  </section>
</template>
<script>
// import { toState01, toState02 } from "@/modules/controls/changingState.js";
// import { cameraJump } from "@/modules/controls/mapFunctions.js";
// import { targetArr } from "@/modules/controls/cameraMove.js";

export default {
  props: ["type"],
  data() {
    return {
      posNumber: 0,
      items: [],
      text: "点击跳转重要节点",
      mapscale:1
    };
  },
  computed: {},

  methods: {
    addMap(){
      if (this.mapscale<2){
        this.mapscale+=0.1;
        document.getElementById('direction').style.transform= 'scale('+ this.mapscale+')'
      }
    },
    cutMap(){
      if (this.mapscale>1){
        this.mapscale-=0.1;
        document.getElementById('direction').style.transform= 'scale('+ this.mapscale+')'
      }
    },
    ctrOp(){
      if(window.zhuzi.material.opacity>0.5) window.zhuzi.material.opacity = 0.5;
      else window.zhuzi.material.opacity = 1;
    },
    backMap(){
      document.getElementById('direction').style.transform= 'scale(1)'
    }
  },

  mounted() {},
};
</script>

<style scoped >
.map-bar-container {
  position: fixed;
  bottom: 90px;
  right: 450px;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;    
  flex-direction: column;
}

.map-bar-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  /* background: url("../../assets/images/mapbar/sand-table.png") no-repeat center;
  background-size: contain; */
  width: 250px;
  /*no*/
  height: 250px;
  /*no*/
  overflow: hidden;
}

.map-bar-small {
  background-size: contain;
  width: 250px;
  /*no*/
  height: 250px;
  /*no*/
  position: relative;
  transform-origin: center center;
  transform: scale(1);
  background-image: url("../../assets/map/jf.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.map-hot-point {
  position: absolute;
  width: 9px;
  /*no*/
  height: 9px;
  /*no*/
  /* background: url("../../assets/images/mapbar/map-yuandian.png") no-repeat
    center; */
  background-size: contain;
  cursor: pointer;
}

.map-hot-point:before {
  content: "";
  display: block;
  width: 19px;
  /*no*/
  height: 19px;
  /*no*/
  border-radius: 50%;
  opacity: 0.2;
  background-color: #ffffff;
  animation: scale 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  margin: -5px -5px;
  /*no*/
}

.map-eye-ico {
  position: absolute;
  pointer-events: none;

  left: 118px;
  /*no*/
  top: 110px;
  /*no*/
  width: 25px;
  /*no*/
  height: 25px;
  /*no*/
  background: url("../../assets/map/first.png") no-repeat
    center;
  background-size: contain;
}
.map-button{
  padding: 2.5px;
    background-color: #0b888a80;
}
.mapBts{
  
    width: 95%;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    bottom: -22px;
    left: 0;
}
.title {
  /* background: url("../../assets/images//mapbar/describe.png") no-repeat center; */
  background-size: contain;
  width: 220px;
  /*no*/
  height: 180px;
  /*no*/
  top: 46px;
  /*no*/
  position: relative;
}
</style>
